<template>
  <div class="payload">
    <project-nav-bar></project-nav-bar>
    <div class="address-main">
      <div class="address-item">
        <div class="address-item-left">
          <div class="name">{{ address.name }}</div>
          <div v-if="address.is_default == 1" class="defaults">默认</div>
        </div>
        <div class="address-item-center">
          <div class="phone">{{ address.mobile }}</div>
          <div class="address">
            {{ address.address }} {{ address.address_detail }}
          </div>
        </div>
        <div class="address-item-right" @click="addressListClick">
          <van-icon name="arrow" />
        </div>
      </div>
    </div>
    <div class="payload-detail">
      <div class="items">
        <span>商品合计</span>
        <span class="right">147</span>
      </div>
      <div class="items">
        <span>运费</span>
        <span class="right">免运费</span>
      </div>
      <div class="items">
        <span>优惠券</span>
        <span class="right">有</span>
      </div>
    </div>
    <div class="cart-vant-list-s" v-if="goodsList.length !== 0">
      <van-swipe-cell v-for="item in goodsList" :key="item.id">
        <van-card
          :num="item.number"
          :price="item.retail_price"
          :title="item.goods_name"
          class="goods-card"
          :thumb="item.list_pic_url"
        >
        </van-card>
      </van-swipe-cell>
    </div>
    <div class="detail-tab-bar">
      <div class="detail-tab-bar-item items price">
        实付: ¥ {{totalPrice}}
      </div>
      <div class="detail-tab-bar-item shop-car" @click="buyClick">下单</div>
    </div>
  </div>
</template>

<script>
import ProjectNavBar from "./children/ProjectNavBar";
import {Toast} from 'vant'
import { getDetailAction } from "@/network/payload/index.js";
export default {
  components: {
    ProjectNavBar,
  },
  created() {
    this.getDetailActions();
  },
  data() {
    return {
      address: {},
      goodsList: [],
      totalPrice: '',
    };
  },
  methods: {
    buyClick() {
      Toast('支付功能尚未开发')
      console.log('支付功能尚未开发')
    },
    getDetailActions() {
      getDetailAction({
        openId: localStorage.getItem("openId"),
        addressId: this.$route.query.id ? this.$route.query.id : "",
      }).then((res) => {
        console.log(res);
        this.totalPrice = res.allPrise
        console.log(this.totalPrice)
        this.address = res.address;
        this.goodsList = res.goodsList;
      });
    },
    addressListClick() {
      console.log(12);
      this.$router.push({
        path: "/address", // 地址列表
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.address-main {
  margin-top: 49px;
  padding: 0px 10px 0;
  background: url(~@/assets/icon/address-bg-bd.png) repeat-x 0 0 #fff;
  .address-item {
    display: flex;
    height: 66px;
    padding: 17px 0;
    border-bottom: 2px solid #ececec;
    .address-item-left {
      width: 20%;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      .defaults {
        padding: 2px 4px;
        border: 1px solid #bb3c41;
        color: #bb3c41;
      }
    }
    .address-item-center {
      width: 60%;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
    }
    .address-item-right {
      width: 20%;
      display: flex;
      // flex-direction: column;
      justify-content: center;
      align-items: center; // 居中
      font-size: 18px;
      color: #7a7a7a;
    }
  }
}
.payload-detail {
  margin: 10px 0 10px;
  padding: 10px;
  background-color: #fff;
  .items {
    display: flex;
    justify-content: space-between;
    padding: 17px 0;
    border-bottom: 1px solid #e3e3e3;
    &:nth-child(3) {
      border-bottom: none;
    }
    // .right {
    //   margin-right: 10px;
    // }
  }
}
.payload {
  background-color: #f4f4f4;
}
.cart-vant-list-s {
  margin-bottom: 50px;
}
.detail-tab-bar {
  position: fixed;
  left: 0;
  bottom: 0px;
  // bottom: 49px;
  width: 100%;
  z-index: 2000;
  display: flex;
  height: 49px;
  background-color: #fff;

  .detail-tab-bar-item {
    // flex: 1;
    width: 30%;
    display: flex;
    justify-content: center;
    align-items: center;
    img {
      width: 23px;
    }
  }
  div.items {
    width: 70%;
    justify-content: flex-start;
    align-items: center;
    margin-left: 10px;
  }
  .shop-car {
    background-color: #b4282d;
    color: #fff;
  }
  .price {
    color: #b4282d;
  }
}
</style>